var currentNav = "indexNav";
window.currentItem = "1";

//加载主页
window.loadIndex = function loadIndex() {
    $("#" + currentNav).removeClass("myactive");
    currentNav = "indexNav"
    $("#" + currentNav).addClass("myactive");
    $("#innerArea").empty();
    $("#innerArea").append(`                <div class="col-5">
                    <!--轮播图片开始-->
                    <div id="imgaeSlider" class="carousel slide image_slider my-2" data-bs-ride="carousel">
                        <!-- 指示符 -->
                        <div class="carousel-indicators">
                            <button type="button" data-bs-target="#imgaeSlider" data-bs-slide-to="0"
                                class="active"></button>
                            <button type="button" data-bs-target="#imgaeSlider" data-bs-slide-to="1"></button>
                            <button type="button" data-bs-target="#imgaeSlider" data-bs-slide-to="2"></button>
                        </div>

                        <!-- 轮播图片 -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img decoding="async" src="./image/catImage/orangecat.png"
                                    class="d-block" style="width:100%; height: 50vh;">
                                <div class="carousel-caption">
                                    <h3>精品推荐</h3>
                                    <p>橘猫</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img decoding="async" src="./image/dogImage/kejidog.jpg"
                                    class="d-block" style="width:100%; height: 50vh;">
                                <div class="carousel-caption">
                                    <h3>精品推荐</h3>
                                    <p>柯基</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img decoding="async" src="./image/birdImage/gezi.jpg"
                                    class="d-block" style="width:100%; height: 50vh;">
                                <div class="carousel-caption">
                                    <h3>精品推荐</h3>
                                    <p>鸽子</p>
                                </div>
                            </div>
                        </div>

                        <!-- 左右切换按钮 -->
                        <button class="carousel-control-prev" type="button" data-bs-target="#imgaeSlider"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#imgaeSlider"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </button>
                    </div>
                    <!--轮播图片结束-->
                    <!--商店须知开始-->
                    <div class="store_notice">
                        <h1>欢迎光临宠物商店</h1>
                        <p>
                        <h4>这是宠物商店</h4>
                        </p>
                        <p>
                        <h4>宠物种类繁多</h4>
                        </p>
                        <p>
                        <h4>除了没有的我们都有</h4>
                        </p>
                    </div>
                    <!--商店须知结束-->
                </div>
                <!--主页卡片区域开始-->
                <div class="col-7">
                    <div class="showCard_area my-2">
                        <div class="mx-auto mt-1 cards" onclick="loadCategories('catNav')">
                            <img class="card-img" src="./image/cards/catCard.jpg" style="width: 100%; height: 100%;">
                        </div>
                        <div class="mx-auto mt-1 cards" onclick="loadCategories('dogNav')">
                            <img class="card-img" src="./image/cards/dogCard.jpg" style="width: 100%; height: 100%;">
                        </div>
                        <div class="mx-auto mt-1 cards" onclick="loadCategories('birdNav')">
                            <img class="card-img" src="./image/cards/birdCard.jpg" style="width: 100%; height: 100%;">
                        </div>
                        <div class="mx-auto mt-1 cards" onclick="loadCategories('pokemonNav')">
                            <img class="card-img" src="./image/cards/pokemonCard.jpg" style="width: 100%; height: 100%;">
                        </div>
                        <div class="mx-auto mt-1 cards" onclick="loadCategories('bugCatNav')">
                            <img class="card-img" src="./image/cards/bugCatCard.jpg" style="width: 100%; height: 100%;">
                        </div>
                    </div>
                </div>
                <!--主页卡片区域结束-->`);
}

//加载商品页
window.loadCategories = function loadCategories(categoryId) {
    console.log(categoryId);
    $("#" + currentNav).removeClass("myactive");
    currentNav = categoryId;
    $("#" + currentNav).addClass("myactive");
    if(categoryId === 'cartNav'){
        loadcart();
    }
    else{
        $("#innerArea").empty();
        $("#innerArea").append("<div class=\"col-12 categoriesArea\" id=\"categoriseArea\">\n" + "</div>");
        loadItemForCategory(categoryId);
    }
}

//加载商品详情
window.loadItem = function loadItem(category, productId) {
    currentNav = category;
    $("#innerArea").empty();
    console.log(productId)
    currentItem = productId;
    //ajax请求后端
    // fetch(`http://localhost:8022/item/get/${productId}`)
    fetch(`http://localhost:8022/api/items/${productId}`)
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then((data) => {
            // 处理获取到的数据
            console.log(data);
            //let datajson = data;
            let datajson= data.data;
            $("#innerArea").append(`<div class="col-12 itemArea">
                    <!--商品详情-->
                    <div class="row myHeight">
                        <div class="col-8 myHeight">
                            <div class="row myHeight">
                                <div class="col-6 imgArea">
                                    <!-- 商品图片 -->
                                    <img src="${datajson.description}">
                                </div>
                                <div class="col-6 optionArea">
                                    <!-- 商品文字介绍 -->
                                    <div class="d-flex justify-content-center mt-5">
                                        <h1>${datajson.name}</h1>
                                    </div>
                                    <div class="d-flex justify-content-center mt-2">
                                        <h2>库存：${datajson.quantity}</h2>
                                    </div>
                                    <div class="d-flex justify-content-center mt-2">
                                        <h2 id="itemPrice">商品价格:￥${datajson.unitPrice}</h2>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-4 d-grid"><button class="btn btn-danger btn-block" onclick="onReduceItemClick()">-</button>
                                        </div>
                                        <div class="col-4 d-flex justify-content-center" id="itemCount">1</div>
                                        <div class="col-4 d-grid"><button class="btn btn-success btn-block" onclick="onAddItemClick()">+</button>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-6 d-grid">
                                            <button class="btn btn-primary btn-block" onclick="onAddToCartClick()">加入购物车</button>
                                        </div>
                                        <div class="col-6 d-grid">
                                            <button class="btn btn-primary btn-block">立即购买</button>
                                        </div>
                                    </div>
                                    <div class="row mt-3 d-grid mx-1">
                                        <button class="btn btn-danger btn-block" onclick="loadCategories('${currentNav}')">返回</button>
                                    </div>
                                </div>
                                <div class="commentArea"></div>
                            </div>
                        </div>
                        <div class="col-4 myHeight recommendArea">
                            <h1 class="mt-5">商品详情</h1>
                            <h3 class="mt-3">${datajson.inform}</h3>
                        </div>
                    </div>
                    <!--商品详情结束-->
                </div>`);
        })
        .catch((error) => {
            // 处理错误信息
            console.error("无对应ID的商品");
        });
}

//加载商品页的商品
function loadItemForCategory(category) {
    let categoryId;
    if (category === 'catNav') categoryId = 'cat';
    if (category === 'dogNav') categoryId = 'dog';
    if (category === 'birdNav') categoryId = 'bird';
    if (category === 'pokemonNav') categoryId = 'pokemon';
    if (category === 'bugCatNav') categoryId = 'bugCat';
    console.log(categoryId);

    //ajax请求后端
    const getProductsByCategoryId = new Promise((resolve, reject) => {
        $.ajax({
            //url: `http://localhost:8022/product/get?categoryId=${categoryId}`,
            //url: `http://localhost:8022/product/get/${categoryId}`,
            url: `http://localhost:8022/api/products/${categoryId}`,
            type: 'GET',
            success: function (data) {
                resolve(data);
            },
            error: function (error) {
                reject(error);
            }
        });
    });

    getProductsByCategoryId.then((result) => {
        // let datajson= JSON.parse(result);
        let datajson= result.data;
        //let datajson= result.data;
        for (let i=0;i<datajson.length;i++) {
            $("#categoriseArea").append(`<!--商品信息卡片开始-->
                    <div class="mt-1 mx-1 card border rounded-3 border-success categoriesCards">
                        <!--商品图片-->
                        <img decoding="async" class="card-img-top myImg"
                            src="${datajson[i].description}">
                        <!--商品信息-->
                        <div class="d-flex flex-column card-body myBody">
                            <p class="card-title" id="StoreName">${datajson[i].name}</p>
                            <p class="card-title" id="StoreIntroduce">${datajson[i].price}元</p>
                            <p class="card-title"><button type="button" class="btn btn-primary" onclick="loadItem('${category}','${datajson[i].productId}')">查看详情</button></p>
                        </div>
                    </div>
                    <!--商品信息卡片结束-->`);
        }
    }).catch(error => console.log(error));

}

window.checkLogin = function checkLogin(){
    if(sessionStorage.getItem('isLogin')){
        console.log('已经登录');
    }else{
        window.alert('请先登录!');
        window.location.href = 'signIn.html';
    }
}